<template>
	<view class="content">
       <image class="shujia" src="../../../static/书架.jpg" mode="aspectFill">
		   
		<view class="l-view l-view-not-border">
			<view class="l-h3">
				<text class="l-h3-title">全部分类</text>
			</view>

			<view class="l-list-classify">
				<navigator url="../index/index1/index1" open-type="navigate">
					<view class="uni-link-item">
						<view class="l-list-item">
							<view class="l-item_view">
								<view class="l-item__value">
									<view class="l-item__value-title">
										课本<!--{{item["name"]}}  hotClassList  {{item["sum"]}}本  v-for="(item,index) in 1" :key="index" -->
									</view>
									<view class="l-item__value-sub">
										13本								
									</view>
								</view>
								<image class="l-img-classify" src="../../../static/classify/课本.jpg" mode="aspectFill">
							</view>
						</view>
					</view>
				</navigator>
				<navigator url="../index/index2/index2" open-type="navigate">
					<view class="uni-link-item">
						<view class="l-list-item" >
							<view class="l-item_view">
								<view class="l-item__value">
									<view class="l-item__value-title">
										课外书籍
									</view>
									<view class="l-item__value-sub">
										12本
									</view>
								</view>
								<image class="l-img-classify" src="../../../static/classify/课外.jpg" mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</navigator>
			
				<navigator url="../index/index4/index4" open-type="navigate">
					<view class="uni-link-item">
						<view class="l-list-item" >
							<view class="l-item_view">
								<view class="l-item__value">
									<view class="l-item__value-title">
										考研书籍
										
									</view>
									<view class="l-item__value-sub">
										11本
									</view>
								</view>
								<image class="l-img-classify" src="../../../static/classify/考研.jpg" mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</navigator>	
				<navigator url="../index/index5/index5" open-type="navigate">
					<view class="uni-link-item">
						<view class="l-list-item" >
							<view class="l-item_view">
								<view class="l-item__value">
									<view class="l-item__value-title">
										资讯
									</view>
									<view class="l-item__value-sub">
										9条
									</view>
								</view>
								<image class="l-img-classify" src="../../../static/classify/资讯.jpg" mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</navigator>
			</view>
		</view>

	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				
				img: `../../../static/t01be0535da266d2078.png`,
				img1: `../../../static/t01d62203d40685e554.jpg`,
				img2:`../../../static/a4b0736000bfa36365f2fccd0fbcd3c3c42c31db9e212a23.WEBP`,
				img3:`../../../static/ab6423693aa28882c1c325ad1b3ed7803420595eac3828c6.WEBP`,
			
			}
		}
		
	}
</script>

<style>
	page,
		uni-page{
			background-color: var(--c-bg-3);
			color: var(--c-txt-1);
			font-size: var(--f-size-2);
			
			/* font-size */
			--f-size-1:24rpx;
			--f-size-2:28rpx;
			--f-size-3:32rpx;
			--f-size-4:36rpx;
			--f-size-5:40rpx;
			--f-size-6:44rpx;
			
			/* color | background */
			--c-txt-1:#FFFFFF;
			--c-txt-2:#95A1A6;
			--c-txt-3:#cdced0;
			
			--c-bg-1:#000000;
			--c-bg-2:#7E7F94;
			--c-bg-3:#0b0c21;
			
			/*--c-bg-2:#7E7F94;
			
			/* padding-left | right */
			--pad-lr:32rpx;
			
			/* navbar-height */
			--h-head:96rpx;
			
			/* input placeholder text color */
			--c-input-holder:#696a7f;
		}
	/* l-body-tab */
	page{background-color: #F5F5F5;}
	
	.l-body-tab {
		display: flex;
		margin: 20rpx 0 0;
		align-items: center;
		white-space: nowrap;
		justify-content: space-around;
	}

	.l-tab-item-img {
		margin-bottom: 10rpx;
	}

	.l-tab-item-img-3,
	.l-tab-item-img-1 {
		width: 60rpx;
		height: 58rpx;
	}

	.l-tab-item-img-2 {
		width: 52rpx;
		height: 56rpx;
	}

	.l-tab-item-img-4 {
		width: 54rpx;
		height: 54rpx;
	}

	.l-tab-item-value {
		text-align: center;
		font-size: 26rpx;
		color: var(--c-txt-2);
	}

	/* l-view */

	.l-view {
		padding: 40rpx var(--pad-lr);
		border-bottom: 1rpx solid #222337;
	}

	.l-view-not-border {
		padding-bottom: 0;
		border-bottom: none;
	}

	.l-h3 {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.l-h3-title {
		font: bold var(--f-size-5) normal;
		color: #000000;
	}
	
	.l-h9 {
		display: flex; 
		flex-direction: row; 
		justify-content: center;
	}
	
	.l-h3-more {
		display: flex;
		align-items: center;
		color: var(--c-bg-2);
	}

	.l-icon-refresh {
		width: 33rpx;
		height: 25rpx;
		margin-left: 12rpx;
	}

	.l-icon-dot {
		width: 30rpx;
		margin-top: 10rpx;
	}

	.l-dl {
		margin-top: 32rpx;
		display: flex;
		width: 100%;
		height: 224rpx;
	}

	.l-dt {
		width: 160rpx;
		height: 100%;
		border-radius: 10rpx;
		margin-right: 24rpx;
	}

	.l-dd {
		width: 70%;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.l-dd-title {
		color: var(--c-txt-3);
		font: var(--f-size-3) normal;
	}

	.l-dd-content,
	.l-dd-footer {
		color: var(--c-txt-2);
		font: var(--f-size-2)/var(--f-size-4) normal;
	}

	.l-dd-view-footer,
	.l-dd-content {
		width: 100%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.l-dd-view-footer {
		color: #868DAB;
		font-size: var(--f-size-1);
		-webkit-line-clamp: 2;
	}

	.l-dd-content {
		-webkit-line-clamp: 3;
	}

	.l-dd-footer {
		display: flex;
		align-items: center;
	}

	.l-dd-img {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		margin-right: 6rpx;
	}


	/* l-dl-view */

	.l-dl-view {
		position: relative;
		height: 282rpx;
		margin-top: 32rpx;
	}

	.l-dl-bg {
		height: 250rpx;
		background: rgba(34, 35, 55, 1);
		box-shadow: 0px 30px 60px 0px rgba(17, 21, 26, 0.1);
		border-radius: 20rpx;
		position: absolute;
		/* top: 32rpx; */
		left: 0;
		width: 100%;
	}

	.l-dl-content {
		position: relative;
		z-index: 1;
		display: flex;
		padding: 0 rpx;
	}

	.l-dt-view {
		width: 168rpx;
		height: 250rpx;
		border-radius: 10rpx;
		margin-right: 30rpx;
	}

	.l-dd-view {
		width: calc(100% - 198rpx);
		padding: 10rpx 10rpx 10rpx 0rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.l-dd-view-content {
		display: flex;
		justify-content: space-between;
	}

	.l-dd-view-title {
		width: calc(100% - 62rpx);
		border-bottom: 1rpx solid #5D637C;
	}

	.l-dd-view-ta,
	.l-dd-view-tb {
		width: 100%;
		overflow: hidden;
		white-space: normal;
		text-overflow: ellipsis;
	}

	.l-dd-view-ta {
		font: bold var(--f-size-3) normal;
	}

	.l-dd-view-tb {
		color: #5D637C;
		padding: 14rpx 0 25rpx;
		font-size: var(--f-size-1);
	}

	/* l-classify */

	.l-list-classify {
		padding: 35rpx 0 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.l-list-item {
		width: 330rpx;
		height: 165rpx;
		background-color: #ffffff;
		/*background: linear-gradient(to right,#FFFAF0,#ffffff);*/
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.l-list-item1 {
		width: 750rpx;
		height: 100rpx;
		/*background-color: #F5F7F9;*/
		background: linear-gradient(to right, #18BC37,#7fd02b);
		
		margin-bottom: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.l-item_view {
		width: calc(100% - 64rpx);
		height: 122rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.l-item__value-title {
		font-size: var(--f-size-2);
		color: #2B3133;
		margin-bottom: 12rpx;
	}

	.l-item__value-sub {
		font-size: var(--f-size-1);
		color: #95A1A6;
	}

	.l-img-classify {
		
		width: 40%;
		height: 100%;
	}
	
	.shujia{
		margin-top: 10px;
	}
	
	
</style>
